<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>营养饮食</title>
    <!-- 引入layui css文件 -->
    <link rel="stylesheet" href="layui-v2.2.3/layui/css/layui.css">
    <!-- 自定义 css -->
    <link rel="stylesheet" href="css/index.css">
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- Header -->
        <div class="header">
            <!-- 个性化标题 -->
            <div class="mytitle">
                <label>母婴护理知识共享平台</label>
            </div>
            <!-- 导航栏 -->
            <div class="mymenu-content">
                <ul class="mymenu">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="message.html">寄语</a></li>
                    <li><a href="photos.html">宝贝墙</a></li>
                    <li><a href="">营养推荐</a></li>
                    <li><a href="aihao.html">疾病预防</a></li>
                    <li><a href="books.html">个人中心</a></li>
                </ul>
            </div>
            <!-- 隐藏功能 -->
            <div class="other-functions">
                <a href="login.html">登录</a>
                <label>/</label>
                <a href="register.html">注册</a>
            </div>
            <!-- 搜索框 -->
            <div class="query">
                <input class="keyword" placeholder="搜索内容"/>
                <i class="layui-icon" style="margin-right: 20px; font-size: 18px;">&#xe615;</i>
            </div>
        </div>
        <!-- 个性签名 -->
        <div class="my-sign">
            <!--  包含标志和签名 -->
            <div class="my-signImg">
                <img id="my-signImg" src="img/my-sign.gif">
                <div class="my-signWord">
                    <span class="my-signTitle" id="my-signTitle">匆匆时光</span>
                    <span class="my-signBody" id="my-signBody">I' am waiting for you here.</span>
                </div>
            </div>
        </div>
        <!-- Content -->
        <div class="main-content" style="text-align: center;background-color: #FFFFFF;width: 85%;margin: auto;padding-top: 20px;">
            <!-- 相册面板 -->
            <div class="blog-item" style="font-weight: 300;">
                <fieldset class="layui-elem-field" style="text-align: left;">
                    <legend>营养饮食推荐</legend>
                    <div class="layui-field-box" style="padding: 20px 100px;">
                    
                        <div class="about-myself" v-for="item in command">
                            <h2 style="font-weight: 300;margin: 20px 0px;">{{item.title}}</h2>
                            <p style="margin: 20px;line-height: 30px;">{{item.message}}</p>
                            <p style="margin: 20px;line-height: 30px;">—推荐年龄：{{item.rang}}</p>
                        </div>
                        
                        
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
    <script src="layui-v2.2.3/layui/layui.js"></script>

    <!-- 引入jquery js -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 自定义 js -->
    <script src="js/index.js"></script>
    <script>
        $(function () {
            //init
            component.init();
        });
    </script>
	</body>
    <script>
		
        new Vue({
            el:"#app",
            data:{
                hello:"helloWorld",
				command:[
                    {
                        "title": "初生宝宝喂养指南",
                        "message": "初生宝宝的喂养十分重要，应当坚持母乳喂养，并在医生指导下添加适量的配方奶粉，避免添加过早的辅食。",
                        "rang": "0-6个月"
                    },
                    {
                        "title": "婴幼儿辅食搭配",
                        "message": "婴幼儿辅食应当根据孩子的年龄和身体状况进行合理搭配，保证各类营养的摄入，可以选择米粉、蔬菜泥、果泥等。",
                        "rang": "6个月以上"
                    },
                    {
                        "title": "母乳喂养注意事项",
                        "message": "母乳喂养是最佳的喂养方式，但需要注意母亲自身的营养摄入，避免过度疲劳和压力，保证充足的水分和休息。",
                        "rang": "0-24个月"
                    },
                    {
                        "title": "宝宝添加辅食的信号",
                        "message": "宝宝适合添加辅食的信号包括：能坐稳、对辅食感兴趣、能够咀嚼等。但应当注意不要太早添加辅食，以免影响消化系统发育。",
                        "rang": "4-6个月"
                    }
                ]

            },
            // 创建就运行
            created() {
            
            },
            // 方法
            methods: {
            
            }
        })
    
	</script>
</html>
